/*
    侧滑汉堡包菜单
    by chenzhian
*/
(function ($) {
    /***************************************************************************************************
     *依赖$.support.transition, 确保先定义
     *目前所依赖的class的bgfade in是在一起的,不能单独用in缺少bgfade,因此也无法(像bootstrap风格)关闭动画
    ****************************************************************************************************/
    $.fn.navDrawToggle = function (callback) {
        var $this = $(this);
        var $tar = $this.find(".navDrawer-content");
        var sClass = "bgfade in";
        var act = $this.hasClass("in") ? "out" : "in";

        act === "in" ? $this.addClass(sClass) : $this.removeClass("in");

        $tar.one($.support.transition.end, function () {
            (act === "out") && $this.removeClass("bgfade");
            if (typeof callback === "function") { callback(); }
        });
    }
})(Zepto);
(function ($, window, undefined) {
    function navDraw(obj) {
        var that = this;
        this.$obj = $(obj);
        this.$cont = this.$obj.find(".navDrawer-content");
        this.startX = 0;
        this.startY = 0;
        this.dis = 0;
        this.bgfade = 0.6;
        this.direction;

        this.deviceWidth = $("body")[0].offsetWidth;
        this.drawerWidth = this.$cont[0].offsetWidth;
        //是否要执行手势滑动
        this.bIsDraw = false;
        this.bIsCertainDrawOut = false;
        //手动时是否已有需要执行的动作在排队(与requestAnimFrame是否存在双重判定?)
        this.isAnimating = false;
        //用于等待css动画结束
        this.bIsDurTrains = false;


        // Simple way to check if some form of pointerevents is enabled or not
        if (window.PointerEventsSupport === undefined) {
            window.PointerEventsSupport = false;
            if (window.PointerEvent || window.navigator.msPointerEnabled) {
                window.PointerEventsSupport = true;
            }
        }

        // Shim for requestAnimationFrame from Paul Irishpaul ir
        // http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
        this.requestAnimFrame = (function () {
            return window.requestAnimationFrame ||
                    window.webkitRequestAnimationFrame ||
                    window.mozRequestAnimationFrame ||
                    function (callback) {
                        window.setTimeout(callback, 1000 / 60);
                    };
        })().bind(window);

        //event function:
        this.eTouchstart = function (e) {
        
            if (this.bIsDurTrains) { return; }
            //do:
            var oTouch = e.touches ? e.touches[0] : e;
            this.fCheckDraw(oTouch);
            if (!this.bIsDraw) { return; }

            //bind following up event:
            if (window.PointerEventsSupport) {
                document.addEventListener(pointerMoveName, this.eTouchmove, true);
                document.addEventListener(pointerUpName, this.eTouchEnd, true);
            } else {
                document.addEventListener('touchmove', this.eTouchmove, true);
                document.addEventListener('touchend', this.eTouchEnd, true);
                document.addEventListener('touchcancel', this.eTouchEnd, true);
            }

        }.bind(this);

        this.eTouchmove = function (e) {
            //x限制改成1px才正常
            //$("#t1").html(e.touches[0].clientX)
            //$("#t2").html()
            if (this.bIsDurTrains) { return; }
            //滑动
            if (!this.bIsDraw) { return; }
            //限制手势
            if (this.direction === "out" && !this.bIsCertainDrawOut) {
                this.checkDrawAgain(e);
                if (!this.bIsCertainDrawOut) { return;}
            }
            e.preventDefault();
            if (this.isAnimating) { return; }
            this.isAnimating = true;
            var that = this;
            //this.requestAnimFrame(function () {
            //    that.fDrawing(e);
            //});
            //requestAnimFrame会导致超级lag
            that.fDrawing(e);

        }.bind(this);

        this.eTouchEnd = function (e) {
            //kill event:
            if (window.PointerEventsSupport) {
                document.removeEventListener(pointerMoveName, this.eTouchmove, true);
                document.removeEventListener(pointerUpName, this.eTouchmove, true);
            } else {
                document.removeEventListener('touchmove', this.eTouchmove, true);
                document.removeEventListener('touchend', this.eTouchEnd, true);
                document.removeEventListener('touchcancel', this.eTouchEnd, true);

            }
            //do something
            this.fEndDraw();

        }.bind(this);

        //----init:----//
        //event bind:
        if (window.PointerEventsSupport) {
            //Pointer Event Listeners
            document.addEventListener(pointerDownName, this.eTouchstart, true);
        } else {
            //Touch Listeners
            document.addEventListener('touchstart', this.eTouchstart, true);
        }
        //点击阴影缩回
        this.$obj.on("click", function (e) {
            //console.log(e)
            if (!$(e.target).hasClass("navDrawer")) { return; }
            that.bIsDurTrains = true;
            that.$obj.navDrawToggle(function () {
                that.bIsDurTrains = false;
            });
        });
    }
    navDraw.prototype = {
        checkDrawAgain: function (e) {
            var oTouch = e.touches[0];
            var nowX = oTouch.clientX;
            var nowY = oTouch.clientY;
            var disY = nowY-this.startY;
            var disX = nowX-this.startX;
            if (disY > 20 || disY < -20) {
                this.bIsDraw = false;
                return;
            }
            if (disX > 20) {
                this.bIsCertainDrawOut = true;
                this.startX = nowX;
            }
        },
        fCheckDraw: function (oTouch) {
            this.startX = oTouch.clientX;
            this.startY = oTouch.clientY;
            //draw out:
            if (this.$obj.hasClass("bgfade")) {
                this.direction = "out";
            }
            //draw in
            /*最小距离右边距15px, release时这个应设置尽量小*/
            else if (this.startX + 15 > this.deviceWidth) {
                this.direction = "in";
                this.$obj.addClass("bgfade");
            }
            else {
                return;
            }
            this.bIsDraw = true;
            this.fDrawInit();

        },
        //滑动执行
        fDrawing: function (e) {
            if (!this.isAnimating) { return; }
            //do
            var oTouch = e.touches[0];
            var nowX = oTouch.clientX;
            var dis = nowX - this.startX;
            //console.log(this.direction)
            this.direction === "in" ? this.fDrawIn(-dis) : this.fDrawOut(dis);
            this.isAnimating = false;
            this.dis = dis;
        },
        fDrawOut: function (dis) {
            var pec,actValue,bgColor;
            //console.log(dis);
            if (dis >= 0) {
                pec = dis / this.drawerWidth;
                actValue = 'translate3d(' + pec * 100 + '%,0,0)';
                bgColor = 'rgba(0,0,0,' + 0.5*(1-pec) + ')'
                this.$cont.css({
                    '-webkit-transform': actValue,
                    '-moz-transform': actValue
                });
                this.$obj.css({
                    "background-color": bgColor
                });
            }
        },
        fDrawIn: function (dis) {
            var pec, actValue;
            if (dis < 0) { return;}
            pec = 1 - (dis / this.drawerWidth);

            if (pec < 0) { return; }

            actValue = 'translate3d(' + pec*100 + '%,0,0)';
            bgColor = 'rgba(0,0,0,' + 0.6 * (1 - pec) + ')'
            this.$cont.css({
                '-webkit-transform': actValue,
                '-moz-transform': actValue
            });
            this.$obj.css({
                "background-color": bgColor
            });

        },
        fDrawInit: function () {
            this.$obj.addClass("manal");
            this.$cont.addClass("manal");
        },
        fEndDraw: function () {
            var that = this;
            this.isAnimating = false;
            if (this.bIsDraw) {
                this.bIsDraw = false;
                this.bIsCertainDrawOut = false;
                this.$cont.removeClass("manal").removeAttr("style");
                this.$obj.removeClass("manal").removeAttr("style");
                //console.log(this.dis)
                if (this.direction === "in") {
                    if (this.dis > -20) {
                        this.$obj.removeClass("bgfade");
                        return;
                    }
                }
                else if (this.dis < 30) {
                    return;
                }
                this.bIsDurTrains = true;
                this.$obj.navDrawToggle(function () {
                    that.bIsDurTrains = false;
                });
            }
            this.dis = 0;
            
        }
    }


    extMylib(window.mylib, "navDraw", navDraw);
})(Zepto, window, undefined);

Zepto(function ($) {
    //按钮触发
    $(document).on("click", "[data-toggle=navdraw]", function () {
        var tar = $(this).data("target");
        $(tar).navDrawToggle();
    });
    //初始化侧栏菜单
    $("[data-role=navdraw]").each(function (i, item) {
        new window.mylib.navDraw(item);
    });
});

